<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // document.querySelector()
    // document.querySelectorAll()
    // getElementsByClassName()
    // matches()

    // 属性
    // childElementCount
    // fristElementChild
    // lastElementChild
    // previousElementSibling
    // nextElementSibling
    // children   childNodes的差别

    // classList  domTokenList类
    // add()    添加该class名称
    // remove()  移除该class名称
    // toggle()  切换class名称
    // contains() 检测是否包含该class名称

    // document.activeElement 包含当前拥有焦点的元素
    // document.hasFocus() 返回boolean值，表示文档是否拥有焦点


    // HTMLElement扩展
    // 1 readyState属性 状态loading complete表示文档加载完毕 （判断文档知否加载完毕）
    // 2 compatMode 属性 ，检测页面的渲染模式 CSS1Compat || Quirks mode
    // 3 document.head 直接指向文档的head元素
    // 4 document.characterSet 表示文档使用的字符集，也可以用来指定新字符集 默认值是“UTF-16” 可以通过meta元素或者响应头也可以修改
    // 自定义属性 data-  dom.dataset.xxx

    // innerHTMl
    // 在读取innerHTML属性的时候，会返回所有后代的HTML字符串，包含元素，注释，文本节点
    // 在写入的时候会根据新的html字符串替换以前的html



    // contains() 包含 判断一个元素是否包含某一个字元素，compareDocumentPosition()

    // innnerText()  outerText()

    // scrollIntoView()
  </script>
</body>
</html>